<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script defer src="script.js"></script>
</head>
<body>
<!--页头部分 只显示横向导航栏 具体内容如下：
    地理位置
    登录信息
    我的订单
    我的京东 》 下拉列表
    京东会员
    企业采购 》 下拉列表
    客户服务 》 下拉列表
    网站导航 》 下拉列表
    手机京东
    网站无障碍
-->
    <header>
        <div class="shortcut">
            <ul class="sl">
                <li class="shortcut_btn dropdown">
                    <a href="#" class="cw_icon">
                        <i class="iconfont"></i>
                        <span>浙江</span>
                    </a>
                </li>
            </ul>
            <ul class="sl"></ul>
            <ul class="sr">
                <li class="login">
                    <a href="#" class="link-login">你好，请登录</a>
                    <a href="#" class="link-register">免费注册</a>
                </li>
                <li class="spacer"></li>
                <li class="myOrders">
                    <a href="#" class="link-orders">我的订单</a>
                </li>
                <li class="spacer"></li>
                <li class="myjd">
                    <a href="#" class="link-myjd">我的京东</a>
                    <i class="iconfont"></i>
                </li>
                <li class="spacer"></li>
                <li class="jd-vip">
                    <a href="#" class="link-vip">京东会员</a>
                </li>
                <li class="spacer"></li>
                <li class="company">
                    <a href="#" class="link-company">企业采购</a>
                    <i class="iconfont"></i>
                </li>
                <li class="spacer"></li>
                <li class="client">
                    <a href="#" class="link-client">客户服务</a>
                    <i class="iconfont"></i>
                </li>
                <li class="spacer"></li>
                <li class="dh">
                    <a href="#" class="link-dh">网站导航</a>
                    <i class="iconfont"></i>
                </li>
                <li class="spacer"></li>
                <li class="phone">
                    <a href="#" class="link-phone">手机京东</a>
                </li>
            </ul>
        </div>
    </header>

    <main>
<!--        搜索部分-->
        <div class="header">
            <div class="head-content">
<!--                大Logo-->
                <div class="logo">
                    <a href="#" class="logo-link"></a>
                </div>
<!--                搜索框-->
                <div id="search-fix">
                    <div class="search-m">
                        <div class="search-logo"></div>
                        <!--                    搜索框-->
                        <div id="search-form" class="search-form">
                            <input type="text" autocomplete="off" aria-label="搜索" style="background: transparent">
                            <span class="search-photo"></span>
                            <button class="search-btn">
                                <i class="iconfont"></i>
                            </button>
                        </div>

                        <!--                    我的购物车-->
                        <div id="search-car" class="search-car">
                            <button>我的购物车</button>
                        </div>
                    </div>
                </div>
<!--                搜索框下的快捷标签-->
                <div class="hotwords">
                    <a href="#">美的巅峰日</a>
                    <a href="#">平板电脑</a>
                    <a href="#">超薄冰箱</a>
                    <a href="#">三星S22</a>
                    <a href="#">精致男士</a>
                    <a href="#">小家电</a>
                    <a href="#">MacBook</a>
                </div>
<!--                导航栏-->
                <div class="navitems">
                    <a class="nav-01" href="#">秒杀</a>
                    <a class="nav-01" href="#">优惠券</a>
                    <a class="nav-02" href="#">PLUS会员</a>
                    <a class="nav-02" href="#">品牌闪购</a>
                    <a class="nav-02" href="#">拍卖</a>
                    <a class="nav-02" href="#">京东家电</a>
                    <a class="nav-02" href="#">京东超时</a>
                    <a class="nav-02" href="#">京东生鲜</a>
                    <a class="nav-02" href="#">京东国际</a>
                    <a class="nav-02" href="#">京东云</a>
                </div>
            </div>
        </div>

        <div class="mainContent">
<!--            第一部分-->
            <div class="content-part1">
                <div class="nav-content">
                    <div class="nav-ver-text">
                        <ul class="ul-left-nav">
                            <li class="menu-item"><a href="#" class="menu-item-link">家用电器</a></li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">手机</a>/
                                <a href="#" class="menu-item-link">运营商</a>/
                                <a href="#" class="menu-item-link">数码</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">电脑</a>/
                                <a href="#" class="menu-item-link">办公</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">家居</a>/
                                <a href="#" class="menu-item-link">家具</a>/
                                <a href="#" class="menu-item-link">家装</a>/
                                <a href="#" class="menu-item-link">厨具</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">男装</a>/
                                <a href="#" class="menu-item-link">女装</a>/
                                <a href="#" class="menu-item-link">童装</a>/
                                <a href="#" class="menu-item-link">内衣</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">美妆</a>/
                                <a href="#" class="menu-item-link">个护清洁</a>/
                                <a href="#" class="menu-item-link">宠物</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">女鞋</a>/
                                <a href="#" class="menu-item-link">鞋包</a>/
                                <a href="#" class="menu-item-link">钟表</a>/
                                <a href="#" class="menu-item-link">珠宝</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">男鞋</a>/
                                <a href="#" class="menu-item-link">运动</a>/
                                <a href="#" class="menu-item-link">户外</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">房产</a>/
                                <a href="#" class="menu-item-link">汽车</a>/
                                <a href="#" class="menu-item-link">汽车用品</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">母婴</a>/
                                <a href="#" class="menu-item-link">玩具乐器</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">食品</a>/
                                <a href="#" class="menu-item-link">酒类</a>/
                                <a href="#" class="menu-item-link">生鲜</a>/
                                <a href="#" class="menu-item-link">特产</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">艺术</a>/
                                <a href="#" class="menu-item-link">礼品鲜花</a>/
                                <a href="#" class="menu-item-link">农资绿植</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">医药保健</a>/
                                <a href="#" class="menu-item-link">计生情趣</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">图书</a>/
                                <a href="#" class="menu-item-link">文娱</a>/
                                <a href="#" class="menu-item-link">教育</a>/
                                <a href="#" class="menu-item-link">电子书</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">机票</a>/
                                <a href="#" class="menu-item-link">酒店</a>/
                                <a href="#" class="menu-item-link">旅游</a>/
                                <a href="#" class="menu-item-link">生活</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">理财</a>/
                                <a href="#" class="menu-item-link">众筹</a>/
                                <a href="#" class="menu-item-link">白条</a>/
                                <a href="#" class="menu-item-link">保险</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="menu-item-link">安装</a>/
                                <a href="#" class="menu-item-link">维修</a>/
                                <a href="#" class="menu-item-link">清洗</a>/
                                <a href="#" class="menu-item-link">二手</a>
                            </li>
                            <li class="menu-item"><a href="#" class="menu-item-link">工业品</a></li>
                        </ul>
                    </div>
                    <div class="nav-img-box">
                        <div class="img-left-box">
                            <button class="img-left-btn">&lt</button>
                            <div class="img-list">
                                <li id="nav-img-1" style="float: left; left: 0; position: absolute; width: 590px; transition: opacity 300ms ease-in-out 0s; opacity: 1;">
                                    <a href="#">
                                        <img src="//imgcps.jd.com/ling4/10039041140780/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6ec/f035a410/cr/s/q.jpg">
                                    </a>
                                </li>
                                <li id="nav-img-2" style="float: left; left: 0px; position: absolute; width: 590px; transition: opacity 300ms ease-in-out 0s; opacity: 0;">
                                    <a href="#">
                                        <img src="//imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/7674228/FocusFullshop/CkNqZnMvdDEvMjA2MDQ5LzMzLzg3MTgvNDc0NTE5LzYxNTMyZjAxRTIxYjVjNDhiLzQ2NTI3OTdiODliNjdmOGEucG5nEgkyLXR5XzBfNTMwAjjui3pCHwob5piT6KeG6K6v5Lya6K6u6Z-z6aKR6KeG6aKREABCEAoM5aW96LSn5rGH6IGaEAFCEAoM56uL5Y2z5oqi6LStEAJCCgoG6LaF5YC8EAdY9LLUAw/cr/s/q.jpg">
                                    </a>
                                </li>
                                <li id="nav-img-3" style="float: left; left: 0px; position: absolute; width: 590px; transition: opacity 300ms ease-in-out 0s; opacity: 0;">
                                    <a href="#">
                                        <img src="//img11.360buyimg.com/pop/s590x470_jfs/t1/188538/25/19399/110890/6121136aE15ffa509/3c6eebe8ae15cbc4.jpg.webp">
                                    </a>
                                </li>
                                <li id="nav-img-4" style="float: left; left: 0px; position: absolute; width: 590px; transition: opacity 300ms ease-in-out 0s; opacity: 0;">
                                    <a href="#">
                                        <img src="//imgcps.jd.com/ling4/100008686531/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6ee/8708bc4c/cr/s/q.jpg">
                                    </a>
                                </li>
                                <li id="nav-img-5" style="float: left; left: 0px; position: absolute; width: 590px; transition: opacity 300ms ease-in-out 0s; opacity: 0;">
                                    <a href="#">
                                        <img src="//imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/100014167968/FocusFullshop/CkNqZnMvdDEvNTgxNjMvMTcvMTU5NjEvMjgwOTE2LzYxNDFiNmE4RTA3ZTBhZTZiLzM1ZGY2YjA4ZDNmMzc5ZWEucG5nEgkzLXR5XzBfNTQwAjjui3pCEwoP5aWl5bC85pGE5YOP5aS0EABCEAoM56eS5p2A5Lu3MTA5EAFCEAoM56uL5Y2z5oqi6LStEAJCCgoG5LyY6YCJEAdYoK-8yvQC/cr/s/q.jpg">
                                    </a>
                                </li>
                                <li id="nav-img-6" style="float: left; left: 0px; position: absolute; width: 590px; transition: opacity 300ms ease-in-out 0s; opacity: 0;">
                                    <a href="#">
                                        <img src="//imgcps.jd.com/ling4/100026667910/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6ee/55bb9d9a/cr/s/q.jpg">
                                    </a>
                                </li>
                                <li id="nav-img-7" style="float: left; left: 0px; position: absolute; width: 590px; transition: opacity 300ms ease-in-out 0s; opacity: 0;">
                                    <a href="#">
                                        <img src="//imgcps.jd.com/ling4/100015347651/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f1/1b667776/cr/s/q.jpg">
                                    </a>
                                </li>
                                <li id="nav-img-8" style="float: left; left: 0px; position: absolute; width: 590px; transition: opacity 300ms ease-in-out 0s; opacity: 0;">
                                    <a href="#">
                                        <img src="//imgcps.jd.com/ling4/10044046186907/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6eb/d44c92d1/cr/s/q.jpg">
                                    </a>
                                </li>
                            </div>
                            <button class="img-right-btn">&gt</button>
                            <div class="img-slider">
                                <i class="slider-btn"></i>
                                <i class="slider-btn"></i>
                                <i class="slider-btn"></i>
                                <i class="slider-btn"></i>
                                <i class="slider-btn"></i>
                                <i class="slider-btn"></i>
                                <i class="slider-btn"></i>
                                <i class="slider-btn"></i>
                            </div>
                        </div>
                        <div class="img-right-box">
                            <li class="img-item1">
                                <a href="#">
                                    <img src="//img20.360buyimg.com/babel/s380x300_jfs/t1/169562/17/27598/86466/61b83ffbEb9b01749/7f0fe23eaaf48b4e.jpg.webp">
                                </a>
                            </li>
                            <li class="img-item2">
                                <a href="#">
                                    <img src="//img13.360buyimg.com/babel/s380x300_jfs/t1/96983/40/21058/99053/61d57a93Ed5d47c2f/ffce68b5ad102f55.png.webp">
                                </a>
                            </li>
                            <li class="img-item3">
                                <a href="#">
                                    <img src="//img13.360buyimg.com/da/s380x300_jfs/t1/62664/36/10650/59706/5d82244cE64b01b88/5e3464a53028cded.png.webp">
                                </a>
                            </li>
                        </div>
                    </div>
                    <div class="nav-other">
                        <div class="user-inner">
                            <div>
                                <div class="user-avatar">
                                    <a href="#" class="user-avatar-lk">
                                        <img src="" class="user-avatar-lk-img">
                                    </a>
                                </div>
                                <div class="user-show">
                                    <a href="#" class="user-tip">Hi~欢迎逛京东</a>
                                    <p>
                                        <a href="#" class="user-login">登录</a>
                                        &nbsp;|&nbsp;
                                        <a href="#" class="user-reg">注册</a>
                                    </p>
                                </div>
                            </div>
                            <div class="user-profit">
                                <a href="#" class="user-profit-lk new-user">新人福利</a>
                                <a href="#" class="user-profit-lk plus-user">PLUS会员</a>
                            </div>
                        </div>
                        <div class="news">
                            <div class="news2">
                                <div class="news-head">
                                    <h5 class="news-head-tit">京东快报</h5>
                                    <a href="#" class="news-head-more">更多 <i class="iconfont">&gt;</i></a>
                                </div>
                                <ul class="news-list">
                                    <li class="news-item">
                                        <a href="#" class="news-item-lk">
                                            <span class="news-span">热议</span>
                                            智能办公小帮手，华为高性价比套装来啦！
                                        </a>
                                    </li>
                                    <li class="news-item">
                                        <a href="#" class="news-item-lk">
                                            <span class="news-span">最新</span>
                                            极米投影仪，打造一个属于你的家庭影院
                                        </a>
                                    </li>
                                    <li class="news-item">
                                        <a href="#" class="news-item-lk">
                                            <span class="news-span">最新</span>
                                            格兰仕微蒸烤一体机，自带食谱，既能“装”又有“食”力
                                        </a>
                                    </li>
                                    <li class="news-item">
                                        <a href="#" class="news-item-lk">
                                            <span class="news-span">推荐</span>
                                            好吃到爆的营养软糖，嗜甜少女无限回购
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="service">
                            <div class="service-entry">
                                <ul class="service-list">
                                    <li class="service-item">
                                        <a href="#" class="service-item-lk">
                                            <i class="service-item-ico">
                                                <img src="//m.360buyimg.com/babel/jfs/t1/30057/19/14881/720/5cbf064aE187b8361/eed6f6cbf1de3aaa.png" class="service-item-ico-img">
                                            </i>
                                            <span class="service-item-text">花费</span>
                                        </a>
                                    </li>
                                    <li class="service-item">
                                        <a href="#" class="service-item-lk">
                                            <i class="service-item-ico">
                                                <img src="//m.360buyimg.com/babel/jfs/t1/36478/38/5384/2901/5cbf065aEb0c60a12/afb4399323fe3b76.png" class="service-item-ico-img">
                                            </i>
                                            <span class="service-item-text">机票</span>
                                        </a>
                                    </li>
                                    <li class="service-item">
                                        <a href="#" class="service-item-lk">
                                            <i class="service-item-ico">
                                                <img src="//m.360buyimg.com/babel/jfs/t1/31069/34/14642/979/5cbf0665Ec7dc8223/5fee386254dd2ebc.png" class="service-item-ico-img">
                                            </i>
                                            <span class="service-item-text">酒店</span>
                                        </a>
                                    </li>
                                    <li class="service-item">
                                        <a href="#" class="service-item-lk">
                                            <i class="service-item-ico">
                                                <img src="//m.360buyimg.com/babel/jfs/t1/32403/22/14829/3699/5cbf0674E04723693/caa83ce9b881cd24.png" class="service-item-ico-img">
                                            </i>
                                            <span class="service-item-text">游戏</span>
                                        </a>
                                    </li>
                                    <li class="service-item">
                                        <a href="#" class="service-item-lk">
                                            <i class="service-item-ico">
                                                <img src="https://m.360buyimg.com/babel/jfs/t1/71890/14/9897/3048/5d7739ddE93eb94f8/f1f6dc5c207329f9.png" class="service-item-ico-img">
                                            </i>
                                            <span class="service-item-text">加油卡</span>
                                        </a>
                                    </li>
                                    <li class="service-item">
                                        <a href="#" class="service-item-lk">
                                            <i class="service-item-ico">
                                                <img src="https://m.360buyimg.com/babel/jfs/t1/45761/32/10307/1581/5d7739e2Ece4b6671/0004c1b85fbf7bde.png" class="service-item-ico-img">
                                            </i>
                                            <span class="service-item-text">火车票</span>
                                        </a>
                                    </li>
                                    <li class="service-item">
                                        <a href="#" class="service-item-lk">
                                            <i class="service-item-ico">
                                                <img src="https://m.360buyimg.com/babel/jfs/t1/51584/31/10221/1685/5d7739e7E1adb25cd/1d0957d7f2ae01a2.png" class="service-item-ico-img">
                                            </i>
                                            <span class="service-item-text">众筹</span>
                                        </a>
                                    </li>
                                    <li class="service-item">
                                        <a href="#" class="service-item-lk">
                                            <i class="service-item-ico">
                                                <img src="https://m.360buyimg.com/babel/jfs/t1/52683/35/10394/3447/5d7739edE270aa7b3/d4d1151b09b5553b.png" class="service-item-ico-img">
                                            </i>
                                            <span class="service-item-text">理财</span>
                                        </a>
                                    </li>
                                    <li class="service-item">
                                        <a href="#" class="service-item-lk">
                                            <i class="service-item-ico">
                                                <img src="https://m.360buyimg.com/babel/jfs/t1/56296/3/10260/1443/5d7739f3E233abc53/e6976f3cb30c9a8a.png" class="service-item-ico-img">
                                            </i>
                                            <span class="service-item-text">白条</span>
                                        </a>
                                    </li>
                                    <li class="service-item">
                                        <a href="#" class="service-item-lk">
                                            <i class="service-item-ico">
                                                <img src="https://m.360buyimg.com/babel/jfs/t1/60778/37/9838/3066/5d7739faEd3b7dbb9/dd4d9ef7ce8fc169.png" class="service-item-ico-img">
                                            </i>
                                            <span class="service-item-text">电影票</span>
                                        </a>
                                    </li>
                                    <li class="service-item">
                                        <a href="#" class="service-item-lk">
                                            <i class="service-item-ico">
                                                <img src="https://m.360buyimg.com/babel/jfs/t1/40738/20/14562/826/5d773a01E09eb8121/d6f3909618c6307a.png" class="service-item-ico-img">
                                            </i>
                                            <span class="service-item-text">企业购</span>
                                        </a>
                                    </li>
                                    <li class="service-item">
                                        <a href="#" class="service-item-lk">
                                            <i class="service-item-ico">
                                                <img src="https://m.360buyimg.com/babel/jfs/t1/57014/6/10297/815/5d773a07Ec7a61fc9/97917a2daa34be0f.png" class="service-item-ico-img">
                                            </i>
                                            <span class="service-item-text">礼品卡</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--            第二部分-->
            <div class="content-part2">

            </div>
<!--            第三部分-->
            <div class="content-part3">

            </div>
        </div>
    </main>

    <footer>
        <div class="fter-tag">
            <div class="fter-tag-inner">
                <ul class="fter-tag-list">
                    <li class="fter-tag-item">
                        <div class="fter-tag-item-unit">
                            <h5 class="fter-tag-item-tit">多</h5>
                            <p class="fter-tag-item-txt">品类齐全，轻松购物</p>
                        </div>
                    </li>
                    <li class="fter-tag-item">
                        <div class="fter-tag-item-unit">
                            <h5 class="fter-tag-item-tit">块</h5>
                            <p class="fter-tag-item-txt">多仓直发，极速配送</p>
                        </div>
                    </li>
                    <li class="fter-tag-item">
                        <div class="fter-tag-item-unit">
                            <h5 class="fter-tag-item-tit">好</h5>
                            <p class="fter-tag-item-txt">正品行货，精致服务</p>
                        </div>
                    </li>
                    <li class="fter-tag-item">
                        <div class="fter-tag-item-unit">
                            <h5 class="fter-tag-item-tit">省</h5>
                            <p class="fter-tag-item-txt">天天低价，畅选无忧</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </footer>

<!--电梯导航栏-->
    <div class="elevator" id="elevator-fix">
        <ul class="elevator-list">
            <li class="elevator-item">
                <a href="#" class="elevator-item-lk">
                    <span class="elevator-item-text">京东秒杀</span>
                </a>
            </li>
            <li class="elevator-item">
                <a href="#" class="elevator-item-lk">
                    <span class="elevator-item-text">特色优选</span>
                </a>
            </li>
            <li class="elevator-item">
                <a href="#" class="elevator-item-lk">
                    <span class="elevator-item-text">频道广场</span>
                </a>
            </li>
            <li class="elevator-item">
                <a href="#" class="elevator-item-lk">
                    <span class="elevator-item-text">为你推荐</span>
                </a>
            </li>
            <li class="elevator-item">
                <a href="#" class="elevator-item-lk">
                    <span class="elevator-item-text">联系客服</span>
                </a>
            </li>
            <li class="elevator-item">
                <a href="#" class="elevator-item-lk">
                    <span class="elevator-item-text">在线反馈</span>
                </a>
            </li>
            <li class="elevator-item elevator-item-top" id="elevator-item-top">
                <a href="#" class="elevator-item-lk">
                    <span class="elevator-item-text">返回顶部</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>